<template>
  <nav class="sub-navbar">
    <router-link to="/algorithm-data" class="nav-link" exact-active-class="active">已通过题目</router-link>
    <router-link to="/algorithm-data/user-statistics" class="nav-link" exact-active-class="active">个人数据分析</router-link>
    <router-link to="/algorithm-data/DependencyGraph" class="nav-link" exact-active-class="active">算法依赖关系图</router-link>
    <router-link to="/algorithm-data/tag-difficulty-analysis" class="nav-link" exact-active-class="active">算法掌握情况</router-link>
  </nav>
</template>

<script>
export default {
  name: "AlgorithmDataSubNav"
};
</script>

<style scoped>
.sub-navbar {
  display: flex;
  justify-content: space-around;
  background-color: #007bff;
  padding: 10px;
  border-radius: 8px;
  margin-bottom: 20px;
}

.nav-link {
  color: #fff;
  font-weight: bold;
  text-decoration: none;
  padding: 5px 10px;
}

.nav-link:hover,
.active {
  background-color: #0056b3;
  border-radius: 4px;
}
</style>
